---
name: List
menu: 1. State Containers
---

import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
import { List } from '../../dist/react-powerplug.esm'

# List

The List component is used to work with an array.  
*For unique arrays see Set.*

## Usage

```js
import { List } from 'react-powerplug'
```

```jsx
<List initial={['#react', '#babel']}>
  {({ list, pull, push }) => (
    <div>
      <FormInput onSubmit={push} />
      {list.map(({ tag }) => (
        <Tag onRemove={() => pull(value => value === tag)}>
          {tag}
        </Tag>
      ))}
    </div>
  )}
</List>
```

## Props  

<Props>
  <Prop name="initial" type="array" default={[]}>
    Specifies the initial `list` state.
  </Prop>
  <Prop name="onChange" type="function">
    The onChange event of the List is called whenever the `list` state changes.
  </Prop>
  <Prop name="children" type="function">
    Receive state as function. It can also be `render` prop.
  </Prop>
</Props>

## Children Props

<ChildrenProps>
  <ChildrenProp name="list" type="array">
    Your `list` state value
  </ChildrenProp>
  <ChildrenProp name="first" type="function">
    Get first element of your `list` array
  </ChildrenProp>
  <ChildrenProp name="last" type="function">
    Get last element of your `list` array
  </ChildrenProp>
  <ChildrenProp name="push" type="function">
    Add one or more items to your `list` array
  </ChildrenProp>
  <ChildrenProp name="pull" type="function">
    Remove an item based on a predicate function.<br />
    All matched items are removed.
  </ChildrenProp>
  <ChildrenProp name="sort" type="function">
    Use <a href="https://www.w3schools.com/jsref/jsref_sort.asp" target="_blank">Array.prototype.sort</a>{' '}
    to sort your `list` state.
  </ChildrenProp>
  <ChildrenProp name="set" type="function">
    Set a new full `list` array to your state  
  </ChildrenProp>
  <ChildrenProp name="reset" type="function">
    Reset `list` to initial state
  </ChildrenProp>
</ChildrenProps>
